<template>
  <el-tooltip :content="value" :disabled="tooltipShow" placement="top-start">
    <span ref="content" @mouseover="isShowTooltip">{{value}}</span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'DescriptionsTooltip',
  props: ['value'],
  data () {
    return {
      tooltipShow: false
    }
  },
  methods: {
    isShowTooltip () {
      const bool = this.$refs.content.offsetWidth < this.$refs.content.parentNode.offsetWidth
      this.tooltipShow = bool
    }
  }
}
</script>

<style scoped>

</style>
<!--————————————————-->
<!--版权声明：本文为CSDN博主「海綿寶寶_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。-->
<!--原文链接：https://blog.csdn.net/qq_45769187/article/details/126679386-->
